import React, { Component } from 'react';
import {
  View,
  Text,
  Animated,
  Easing,
  TouchableOpacity,
  StyleSheet,
  Image,
  StatusBar,
  Dimensions
} from 'react-native';

export default class OpacityPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fadeOutOpacity: new Animated.Value(1),
      scale1: new Animated.Value(1),
      fadeInOpacity: new Animated.Value(0),
      scale2: new Animated.Value(0.5)
    };

    this.parallelAnimated = Animated.parallel([
      Animated.timing(this.state.fadeOutOpacity, {
        toValue: 0,
        duration: 200,
        easing: Easing.linear
      }),
      Animated.timing(this.state.scale1, {
        toValue: 0.5,
        duration: 200,
        easing: Easing.linear
      }),
      Animated.timing(this.state.fadeInOpacity, {
        toValue: 1,
        duration: 200,
        easing: Easing.linear
      }),
      Animated.spring(this.state.scale2, {
        toValue: 1,
        friction: 3, //弹跳系数
        tension: 10 // 控制速度
      })
    ]);
  }

  _startAnimateOpacity = () => {
    this.state.fadeOutOpacity.setValue(1);
    this.state.fadeInOpacity.setValue(0);
    this.state.scale1.setValue(1);
    this.state.scale2.setValue(0.5);
    this.parallelAnimated.start();
  };

  render() {
    return (
      <View style={styles.mainStyle}>
        <StatusBar
          translucent
          hidden={false}
          barStyle="dark-content"
          backgroundColor="transparent"
        />
        <Animated.View
          style={[
            styles.opacityView,
            {
              opacity: this.state.fadeOutOpacity,
              transform: [{ scale: this.state.scale1 }]
            }
          ]}
        >
          <Image
            ref="image"
            style={{ width: 200, height: 300 }}
            source={{
              uri:
                'https://img1.gamersky.com/upimg/pic/2018/07/01/201807011113128645.jpg'
            }}
          />
        </Animated.View>
        <Animated.View
          style={[
            styles.opacityView,
            {
              position: 'absolute',
              left: (Dimensions.get('window').width - 200) / 2,
              top: (Dimensions.get('window').height - 300) / 2 - 10,
              opacity: this.state.fadeInOpacity,
              transform: [{ scale: this.state.scale2 }]
            }
          ]}
        >
          <Image
            ref="image"
            style={{ width: 200, height: 300 }}
            source={{
              uri:
                'http://img1.gamersky.com/upimg/pic/2017/04/17/201704170922461505.jpg'
            }}
          />
        </Animated.View>

        <TouchableOpacity onPress={this._startAnimateOpacity}>
          <Text style={styles.opacityBtn}>点击开始动画</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  mainStyle: {
    paddingTop: StatusBar.currentHeight,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFF'
  },
  opacityView: {
    width: 200,
    height: 300
  },
  opacityBtn: {
    width: 200,
    height: 100,
    textAlign: 'center',
    lineHeight: 100
  }
});
